<template>
	<view class="bg-gray" style="min-height: 100vh;">
		<view class="banner bg-img text-white u-p-t-50" :style="{backgroundImage: `url('/static/images/walletBg.jpg')`}">
			<u-navbar 
				title="我的钱包" 
				:title-color="scrollTop<100?'#FFFFFF':'#333333'" 
				:border-bottom="scrollTop>100" 
				:background="{backgroundColor:`rgba(255,255,255,${scrollTop<100?0:100})`}"
				:back-icon-color="scrollTop<100?'#FFFFFF':'#333333'"
			></u-navbar>
			<view class="padding text-center">
				<view class="text-sl"> 
					<text class="text-xxl text-price"></text> 
					<text>{{catMoney}}</text>
				</view>
				<view class="margin-top-xs">当前余额</view>
			</view>
		</view>
		<view class="cu-list menu sm-border">
			<view @tap="toRecharge" url="/pages/wallet/payment" hover-class="none" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-recharge text-blue"></text>
					<text class="text-grey">充值</text>
				</view>
			</view>
			<view @tap="toCashOut" url="/pages/wallet/cashOut" hover-class="none"  class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-sponsor text-green"></text>
					<text class="text-grey">提现</text>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>
				收支记录
			</view>
		</view>
		<view class="cu-list menu solid-top">
			<view class="cu-item" v-for="(item,index) in incomeList" :key="index">
				<view class="content padding-tb-sm">
					<view>{{item.title}}</view>
					<view class="text-gray text-sm">{{item.createDate}}</view>
				</view>
				<view class="action" :class="{'cuIcon-move text-orange':item.sort==1,'cuIcon-add text-green':item.sort==0}">
					<text>{{item.money|money}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import walletAPI from "@/api/wallet.js"
	import {mapGetters,mapActions} from "vuex"
	import { jumpTo, toast } from "@/utils/util"
 	export default {
		data() {
			return {
				incomeList:[],
				pageNo:1,
				pageSize:10,
				nomore:false,
				loading:false,
				scrollTop:0
			}
		},
		computed:{
			...mapGetters('wallet',['assets']),
			...mapGetters('system',['rechargeable','withdraw','breaktime']),
			catMoney(){
				return this.assets.catMoney.toFixed(2)
			}
		},
		filters:{
			billType(val){
				return billTypes[val]||'';
			},
			money(val){
				return val.toFixed(2);
			}
		},
		onPageScroll({scrollTop}) {
			this.scrollTop=scrollTop
		},
		onLoad() {
			this.resetIncomes()
			uni.$on('wallet_reset_incomes',this.resetIncomes)
		},
		onUnload() {
			uni.$off('wallet_reset_incomes',this.resetIncomes)
		},
		onReachBottom(){
			this.moreIncomes()
		},
		onShow(){
			this.fetchAssets()
		},
		methods:{
			...mapActions('wallet',['fetchAssets']),
			isBreaktime(){
				const todayMin = (Math.floor(Date.now()/(1000*60))+480)%(60*24)
				const sh = Math.fround(this.breaktime.start/60)
				const sm = Math.fround(this.breaktime.start%60)
				const eh = Math.fround(this.breaktime.end/60)
				const em = Math.fround(this.breaktime.end%60)
				if((this.breaktime.start<this.breaktime.end)&&(todayMin>this.breaktime.start&&todayMin<this.breaktime.end)){
					throw new Error(`现在是非提现工作时间，请在正常提现时间操作。非提现工作时间：${sh>9?sh:`0${sh}`}:${sm>9?sm:`0${sm}`} - ${eh>9?eh:`0${eh}`}:${em>9?em:`0${em}`}`)
				}
				if((this.breaktime.start>this.breaktime.end)&&(todayMin>this.breaktime.start||todayMin<this.breaktime.end)){
					throw new Error(`现在是非提现工作时间，请在正常提现时间操作。非提现工作时间：${sh>9?sh:`0${sh}`}:${sm>9?sm:`0${sm}`} - ${eh>9?eh:`0${eh}`}:${em>9?em:`0${em}`}`)
				}
			},
			async resetIncomes(){
				this.pageNo = 1
				this.incomeList = []
				this.nomore = false
				await this.moreIncomes()
			},
			async moreIncomes(){
				if(this.loading){
					throw new Error('正在请求中')
				}
				try{
					this.loading = true
					if(this.nomore){
						return []
					}
					const list = await walletAPI.incomeList({pageNo:this.pageNo,pageSize:this.pageSize})
					if(!list||list.length<this.pageSize){
						this.nomore = true
					}else{
						this.pageNo++
					}
					this.incomeList.push(...list)
				}finally{
					this.loading = false
				}
			},
			toRecharge(){
				if(this.rechargeable){
					jumpTo('/pages/wallet/payment')
				}else{
					toast('暂未开放自助充值服务')
				}
			},
			toCashOut(){
				try{
					if(!this.withdraw){
						throw new Error('暂未开放自助提现服务')
					}
					this.isBreaktime()
					jumpTo('/pages/wallet/cashOut')
				}catch(e){
					return toast(e.message)
				}
			}
		}
	}
</script>

<style>
	.banner{
		background-image: url('/static/images/walletBg.jpg');
	}
	.walletHead {
		position: relative;
		padding: 30upx 0 60upx;
		display: flex;
		text-align: center;
		border-radius: 10upx;
	}

	.walletHead image {
		position: absolute;
		width: 100%;
		height: 100upx;
		bottom: 0;
	}
</style>
